<template>
    <div class="l-sidebar">
        <div class="info">
            <div class="avatar">
                <el-avatar size="large" :src="userInfo.avatarUrl"></el-avatar>
            </div>
            <span>{{userInfo.nickName}}</span>
            <br/>
            <span>{{userInfo.motto}}</span>
            <div class="article-data">
                <span>文章数: {{userInfo.articleCount}}</span>
                <span style="padding-left: 2vw;"></span>
                <span>阅读量: {{userInfo.readCount}}</span>
            </div>
        </div>
        <div class="hot">
            <div class="hot-title">
                <span>热门文章</span>
                <div class="hotArticleTable">
                    <el-table :data="hotArticles"
                            :show-header="false"
                            stripe
                            style="width: 100%">
                        <el-table-column :show-overflow-tooltip="true">
                            <template #default="scope">
                                <el-link style="color: black" type="primary" @click="openArticle(scope.row)">{{scope.row.title}}</el-link>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import { ref, reactive, onMounted, inject } from "vue";
    import {View} from '@element-plus/icons'
    import {getArticleBase} from "../../api";
    import {ElMessage, ElLoading} from "element-plus";
    import { useRouter } from "vue-router";
    export default {
        name: "LSidebar",
        components: {
            View
        },
        setup() {
            const reload  = inject("reload");
            const router = useRouter();
            const userInfo = ref({
                nickName: 'IT00ZYQ',
                avatarUrl: "https://it00zyq.oss-cn-beijing.aliyuncs.com/47d1f1a300c94c71a76ca612d2149a0d山.jpg",
                articleCount: 10,
                readCount: 100,
                motto: "It is attitude, not aptitude, that determines one's altitude."
            });
            const  hotArticles = ref([
                {
                    id: 1,
                    title: "Css中的position: fixed; 属性的使用",
                    readCount: 10000
                },
                {
                    id: 1,
                    title: "Css中的position: fixed; 属性的使用",
                    readCount: 10000
                },
                {
                    id: 1,
                    title: "Css中的position: fixed; 属性的使用",
                    readCount: 10000
                }
            ]);

            onMounted(() => {
               const loadingInstance = ElLoading.service({});
               getArticleBase().then(res => {
                   if (res.code === 200) {
                       userInfo.value.articleCount = res.data.articleCount;
                       userInfo.value.readCount = res.data.readCount;
                       hotArticles.value = res.data.articles;
                   } else {
                       ElMessage.error(res.message);
                   }
               }).finally(
                   loadingInstance.close()
               )
            });

            const openArticle = (row) => {
                console.log("点击热门文章", row.id);
                reload();
                router.push({
                    name:'Read',
                    params: {
                        id: row.id
                    }
                });
            };
            return {
                userInfo,
                hotArticles,
                openArticle
            }
        }
    }
</script>

<style scoped>
.info,.hot {
    display: block;
    border-radius: 10px;
    width: 20vw;
    background-color: RGB(235, 235, 245);
}
.info {
    /*height: 25vh;*/
    text-align: center;
}
.hot {
    height: 70vh;
    margin-top: 2vh;
}
.avatar {
    padding-top: 1vh;
}
.article-data {
    padding-top: 1vh;
    padding-bottom: 1vh;
}
.hot-title {
    background-color: aliceblue;
    height: 6vh;
    border-radius: 10px;
    line-height: 6vh;
    text-align: center;
}
a {
    text-decoration: none;
    color: #fff;
}
</style>